<template>
    <div class="ind-detail">
        <header>
            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="skip" />
        </header>
        <div class="indexNav">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="i in banner_list.result">
                    <img :src="i.banner_picUrl" alt="" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="product">
            <div class="product_box">
                <div class="product_item" v-for="i in product_list.result" @click="on(i.index_product_id)">
                    <div class="img">
                        <img :src="i.product_img" alt="" />
                    </div>
                    <div class="pro_detail">
                        <div class="detail_name">{{ i.product_name }}</div>
                        <div class="detail_price">
                            <span class="detail_symbol">¥</span>
                            <span class="price">{{ i.product_price }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { indexList, bannerList } from "../../request/index.js";
import { useRouter } from "vue-router";
let router = useRouter();
let on = (x) => {
    // console.log(x);

    router.push({ path: "/commoditydetails/" + x, query: { id: x } });
};
let product_list = reactive({ result: [] });
let banner_list = reactive({ result: [] });

indexList().then((data) => {
    product_list.result = data.data;
    // console.log(product_list.result);
});
bannerList().then((data) => {
    banner_list.result = data.data;
});

let value = ref("");
let skip = () => {
    router.push({ path: "/search" });
    return;
};
</script>
<style lang="scss" scoped>
.van-search {
    background-color: #f4f4f4;
}
// body {
//     background-color: #f7f7f7;
// }
.ind-detail {
    background-color: #f7f7f7;
}
.my-swipe {
    border-radius: 8px;
    .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #8ac2e5;
    }
}

.indexNav {
    margin-top: 0.625rem;
    padding: 0 12px;
    height: 189px;
    .van-swipe,
    .my-swipe {
        height: 100%;
    }
    .van-swipe-item {
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
.product {
    padding: 0 12px;
}
.product_box {
    margin-bottom: 55px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .product_item {
        overflow: hidden;
        border-radius: 12px;
        margin-top: 10px;
        width: 49%;
        height: 230px;
    }
    .img {
        width: 100%;
        height: 170px;
        background-color: #a9d0e9;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .pro_detail {
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 6px;
        height: 60px;
        // background-color: #c1c1c1;
        display: flex;
        flex-direction: column;
        .detail_name {
            font-size: 0.875rem;
            white-space: normal;
            word-break: break-all;
            height: 1.75rem;
            padding-top: 0.1875rem;
            width: 100%;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .detail_price {
            flex: 1;
            display: flex;
            align-items: center;
            color: red;
            .detail_symbol {
                font-size: 0.75rem;
            }
            .price {
                font-size: 1.125rem;
            }
        }
    }
}
</style>
